<template>
<div class="page-container" :style="currentAnnouncement ? {} : {marginBottom: '20px'}">
    <div class="page-content">
        <template v-if="currentAnnouncement">
            <div class="announcement-banner">
                <!-- 固定位置的图标 -->
                <i class="fa fa-volume-up announcement-icon"></i>
                <span
                    v-show="currentAnnouncement"
                    class="announcement-content"
                    :class="{ 'system-text': currentAnnouncement.is_system }"
                >
                    {{ currentAnnouncement.content }}
                    <!-- 统一处理跳转链接 -->
                    <a
                        v-if="currentAnnouncement.is_jump"
                        :href="currentAnnouncement.jump_url"
                        target="_blank"
                        class="link-button"
                    >
                        点我前往
                    </a>
                </span>
            </div>
        </template>
    </div>
    </div>
</template>


<script setup>
const announcements = ref([]);
const currentIndex = ref(0);
let intervalId = null;

// 计算属性优化
const currentAnnouncement = computed(() =>
    announcements.value[currentIndex.value] || null
);

const bannerClass = computed(() => ({
    'system-announcement': currentAnnouncement.value?.is_system,
    'announcement-banner': !currentAnnouncement.value?.is_system,
}));


// 数据请求封装
const fetchAnnouncements = async () => {
    try {
        const { data } = await axios.get("/api/blog/announcement/");
        announcements.value = data.results;
    } catch (error) {
        console.error("获取公告数据失败：", error);
        // 可以添加错误处理逻辑
    }
};

// 生命周期管理
onMounted(async () => {
    await fetchAnnouncements();
    if (announcements.value.length > 1) {
        intervalId = setInterval(() => {
            currentIndex.value = (currentIndex.value + 1) % announcements.value.length;
        }, 3000);
    }
});

onBeforeUnmount(() => {
    clearInterval(intervalId);
});
</script>


<style scoped>
/* 公共样式 */
.announcement-content {
    color: var(--text-color, #009688); /* 默认颜色 */
    font-weight: 500;
    font-size: 13px;
    margin: auto 0;

}

/* 系统公告文字颜色 */
.system-text {
    color: var(--text-color, red) !important;
}

/* 公告容器样式 */
.announcement-banner {
    background: var(--card-bg-color, #fff);
    border-radius: 4px;
    width: 100%;
    padding: 10px 0;
    margin: 15px 10px 15px 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.announcement-banner span {
    margin-left: 10px;
}
.announcement-icon {
    color: #009688;
    font-size: 16px;
    margin-left: 12px;
    position: relative;
}


.link-button {
    color: var(--card-link-color,#01AAED);
    margin-left: 8px;
    text-decoration: underline;
}
@media screen and (max-width: 992px) {
  .announcement-banner {
    margin: 10px 0;
    width: 92%;
  }
}
@media screen and (max-width: 576px) {
  .announcement-banner {
    margin: 40px 0 0 0;
    max-height: 45px;
  }
  .announcement-content {
    font-size: 12px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 90%; /* 设置一个固定的宽度 */
  }
}
</style>



